<nz-space>
  <nz-upload *nzSpaceItem [nzMultiple]="true" [nzBeforeUpload]="beforeUpload">
    <button nz-button>
      <span nz-icon nzType="upload"></span>
      选择上传文件...
    </button>
  </nz-upload>
</nz-space>
<nz-list nzGrid>
  <div nz-row nzGutter="8">
    <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="6" nzXl="6" *ngFor="let item of fileUploadList">
      <nz-list-item>
        <nz-card [nzTitle]="titleTpl">
          <div *ngIf="item.metadata.id">
            <nz-descriptions [nzColumn]="1">
              <nz-descriptions-item nzTitle="名称">{{ item.metadata.name }}</nz-descriptions-item>
              <nz-descriptions-item nzTitle="大小">{{ item.metadata.size || 0 | bytes: 0 }}</nz-descriptions-item>
              <nz-descriptions-item nzTitle="类型">
                {{ item.metadata.contentType | shorten: 40:'...' }}
              </nz-descriptions-item>
              <nz-descriptions-item nzTitle="创建日期">
                {{ item.metadata.createdDate | date: 'yyyy-MM-dd HH:mm' }}
              </nz-descriptions-item>
            </nz-descriptions>
          </div>

          <div *ngIf="item.isUpload && !item.metadata.id">
            <nz-progress [nzPercent]="item.percent"></nz-progress>
          </div>

          <div nz-row nzJustify="center">
            <div *ngIf="item.isUpload" nz-col>
              <a (click)="cancel(item)">取消上传</a>
            </div>

            <div *ngIf="!item.isUpload && item.metadata.id === undefined">
              <a (click)="continue(item)">重新上传</a>
            </div>

            <div *ngIf="item.metadata.id">
              <a (click)="view(item)">查看</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a (click)="rename(item)">重命名</a>
            </div>

            <div *ngIf="!item.isUpload">
              <nz-divider nzType="vertical"></nz-divider>
              <a (click)="delete(item)">删除</a>
            </div>
          </div>
        </nz-card>

        <ng-template #titleTpl>
          <nz-tag nzColor="warning" *ngIf="item.state === 'cancel'">
            <span nz-icon nzType="exclamation" *ngIf="item.state === 'cancel'"></span>
          </nz-tag>
          <nz-tag nzColor="success" *ngIf="item.state === 'success'">
            <span nz-icon nzType="check-circle"></span>
          </nz-tag>
          <nz-tag nzColor="processing" *ngIf="item.state === 'processing'">
            <span nz-icon nzType="sync"></span>
          </nz-tag>
          <nz-tag nzColor="error" *ngIf="item.state === 'error'">
            <span nz-icon nzType="close-circle"></span>
          </nz-tag>
          {{ item.file.name }}
        </ng-template>
      </nz-list-item>
    </div>
  </div>
  <nz-list-empty *ngIf="fileUploadList.length === 0"></nz-list-empty>
</nz-list>
